<template>
	<view class="">
		<w-navbar title="登录" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="login_container">
					<view class="login_title">
						登录
					</view>
					<view class="form_box">
						<view class="form_item">
							<image src="../../static/image/account.png" mode=""></image>
							<view class="text_input">
								<input v-model="account" type="text" placeholder="登录账号" :maxlength="-1" />
							</view>
						</view>
						<view class="form_item">
							<image src="../../static/image/password.png" mode=""></image>
							<view class="text_input">
								<input v-model="password" password placeholder="登录密码" :maxlength="-1" />
							</view>
						</view>
					</view>
					<view @click="goLogin" class="login_btn">
						登录
					</view>
					<!-- <view @click="isCheck = !isCheck" class="tips_box">
						<view class="fr-ac-jc check_box" :style="{'borderColor':isCheck?PUBLIC_STYLE.color:'','backgroundColor':''}">
							<view v-show="isCheck" class="iconfont icon-select-bold" :style="{'color': PUBLIC_STYLE.color}"></view>
						</view>
						<view class="ml-10" style="color: #999;">
							已经阅读同意
						</view>
						<view @click.stop="pageJump('/pages/login/protocol?diyname=agreement')" class="">
							《用户协议》
						</view>
						<view @click.stop="pageJump('/pages/login/protocol?diyname=ysxy')" class="">
							《隐私政策》
						</view>
					</view> -->
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	import {isValue} from '@/utils/common.js'
	export default{
		data(){
			return{
				account:'',
				password:'',
				isCheck:true,
			}
		},
		onShow() {
		},
		methods:{
			pageJump(url){
				uni.navigateTo({
					url
				})
			},
			goLogin(){
				this.account = isValue(this.account)
				this.password = isValue(this.password)
				if(!this.account){
					return uni.showToast({
						title:'请输入账号',
						icon:'none'
					})
				}
				if(!this.password){
					return uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
				}
				if(!this.isCheck){
					return uni.showToast({
						title:'请同意并勾选用户协议与隐私政策',
						icon:'none'
					})
				}
				this.login()
			},
			async login() {
				const res = await this.$http({
					url: '/api/User/login',
					data: {
						account:this.account,
						password:this.password
					}
				})
				if(res.code == 1){
					uni.setStorageSync('token',res.data.userinfo.token)
					uni.setStorageSync('user',res.data.userinfo)
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.login_container{
		height: 100%;
		box-sizing: border-box;
		padding: 80rpx 50rpx;
		position: relative;
	}
	
	.login_title{
		font-size: 50rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 20rpx;
		color: $theme-color;
		
		image{
			display: block;
			margin:  0 auto;
			width: 35%;
		}
	}
	.form_box{
		margin-top: 60rpx;
		
		.form_item{
			padding-bottom: 20rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgb(231,231,231);
			
			.iconfont,.text_input{
				color: #999;
				font-size: 28rpx;
			}
			.text_input{
				margin-left: 20rpx;
			}
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.login_btn{
		margin-top: 60rpx;
		padding: 20rpx 0;
		width: 100%;
		background-color: $theme-color;
		color: rgb(255, 255, 255);
		text-align: center;
	}
	
	.tips_box{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		
		view {
			font-size: 26rpx;
		}
	}
	
	.check_box{
		$size:30rpx;
		width: $size;
		height: $size;
		min-width: $size;
		min-height: $size;
		border-radius: 50%;
		padding: 4rpx;
		
		box-sizing: border-box;
		border: 2rpx solid #888;
		.iconfont{
			font-size: 24rpx;
		}
	}
</style>